<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:>
<head>
    <th:block th:include="include :: header('首页')" />

</head>
<script src="js/search.js"></script>
<script src="js/product.js"></script>




<body>
<th:block th:include="include :: top" />
<header class="product">
    <a href="./" class="logo">
        <img src="img/logo2.png">
    </a>
    <div class="search">
        <form action="search" >
            <input type="text" placeholder="搜索 ${website_name} 商品/品牌/店铺" name="keyword">
            <button class="search-button" type="submit">搜索</button>
        </form>
        <ul class="search-below">
            <a th:each = "c:${product}">
                <li><a href="category?id=${c.id}" th:text="${c.name}"></a></li>
            </a>
        </ul>

    </div>

</header>

<section class="banner">

</section>

<section class="property">
    <div class="gallery">
        <div  class="pic-border">
            <img src="${productImgDir}${productTopImages[0].path}" id="big-show">
        </div>
        <div id="div4load" style="display:none;"></div>
    </div>
    <div th:each = "p:${product}" class="detail" >
        <div class="product-title" th:text = "${p.name}">
        </div>
        <div th:each = "p:${product}" class="price">
            <div class="sales">
                <img src="img/gouwu.png">全站实物商品通用
            </div>
            <div class="top-line">
                <span class="o-price left">价格</span>
                <span class="o-price-num" th:text="${p.price}"></span>
            </div>
            <div class="middle-line">
                <span class="s-price left">促销价</span>
                <span class="yen">￥</span><span class="s-price-num" th:text="${p.price}"></span>
            </div>
        </div>
        <div th:each = "p:${product}" class="history">
            <span class="m-sales item">月销量 <em th:text="${p.saleCount}"></em></span>
            <span class="c-num item">累计评价 <em th:text="${p.commentCount}"></em></span>
            <span class="t-score item">送积分 <em th:text="${p.id*7}"></em></span>
        </div>
        <div th:each = "p:${product}" class="product-num">
            <span class="buy-num left">数量</span>
            <input type="text" class="input" value="1" id="buy-number">
            <span class="arrow">
                    <a class="increase-number" id="increase-number" href="#nowhere">
                    <span class="updown arrow-png">
                       <img src="img/increase.png">
                    </span>
                    </a>
                    <span class="updown-middle"> </span>
                    <a class="decrease-number" id="decrease-number" href="#nowhere">
                    <span class="updown arrow-png">
                        <img src="img/decrease.png">
                    </span>
                    </a>
                </span>
            <span class="piece">库存量</span>
            <span class="inventory" id="inventory" stock="${product.stock}" th:text="${product.stock}"></span>
        </div>
        <div th:each="p : ${product}" class="buy">
            <a th:href="@{'buyOne?pid=' + ${p.id}}" id="buy-link" ></a>
            <a th:href="@{'addCart?pid=' + ${p.id}}" id="cart-link"></a>
            <button class="buy-button" id="buy-button">立即购买</button>
            <button class="car-button" id="cart-button"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button>
        </div>
        <div class="service">
            <span class="left">服务承诺</span>
            <span>正品保证</span>
            <span>极速退款</span>
            <span>七天无理由退换</span>
        </div>
    </div>
</section>

<main class="product-content">
    <div class="product-bar">
        <div class="product-select selected" href="#nowhere" id="button-1">
            <a href="#nowhere">商品详情</a>
        </div>
        <div class="product-select" href="#nowhere" id="button-2">
<!--            <a href="#nowhere">-->
<!--                累计评价-->
<!--                <span class="product-comment-number">${product.commentCount}</span>-->
<!--            </a>-->
        </div>
    </div>
    <div class="clear" id="main-1">
        <div class="product-top">
            <div class="product-key-title">产品参数：</div>
            <ul class="product-key">
                <div th:each ="p,vs:${property}">
                    <li><span th:text="${p.name}"/>:<span th:text="${p.value}"/></li>
                </div>
            </ul>
        </div>

    </div>
    <div class="clear" id="main-2" style="display: none;">
        <table class="comment">
            <tr th:each="c,vc:${comments}" >
                <tr>
<!--                    <td class="comment-left">${c.content}-->
<!--                        <span class="date">${c.createDate}</span></td>-->
<!--                    <td class="comment-right">${c.user.name}<span class="annoy">（匿名）</span></td>-->
                </tr>
            </tr>
        </table>
    </div>
</main>

<th:block th:include="include :: footer" />

</body>>
</html>